<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
	   xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:a4j="http://richfaces.org/a4j"
	   xmlns:rich="http://richfaces.org/rich" 
      xmlns:composite="http://java.sun.com/jsf/composite">

<!-- INTERFACE -->
<composite:interface>
	<composite:attribute name="classe" />
	<composite:attribute name="classes" />
	<composite:attribute name="sistema" />	
	<composite:attribute name="sistemas" />
	<composite:attribute name="casoDeUso" />
	<composite:attribute name="casosDeUso" />
	<composite:attribute name="bean" />
</composite:interface>

<!-- IMPLEMENTATION -->
<composite:implementation>
	<rich:panel id="mapsClassePanel" styleClass=".form" header="Selecione o caso de uso" headerClass="header" columnClasses="label, none">
		<h:panelGrid columns="4"  >

			<h:panelGroup><div style="text-align:right; width:90px;"><h:outputLabel value="Sistemas:" /></div></h:panelGroup>
			<h:selectOneMenu id="cbxSistema" style=" width : 200px;" value="#{cc.attrs.bean.idSistema}" tabindex="1" >  
                <f:selectItems value="#{cc.attrs.sistemas}" var="s" itemLabel="#{s.nome}" itemValue="#{s.id}" />  
			    <f:ajax listener="#{cc.attrs.bean.sistemaFoiTrocado}" render="cbxCasoDeUso" />
			</h:selectOneMenu>		
						
			<h:panelGroup><div style="text-align:right; width:90px;"><h:outputLabel value="Casos de uso:" /></div></h:panelGroup>
			<h:selectOneMenu id="cbxCasoDeUso" value="#{cc.attrs.casoDeUso}" style=" width : 200px;" tabindes="1">
                <f:selectItems value="#{cc.attrs.casosDeUso}" var="cu" itemLabel="#{cu.nome}" itemValue="#{cu}" />  
			    <f:ajax listener="#{cc.attrs.bean.casoDeUsoFoiTrocado}" render="classePanel" />
            </h:selectOneMenu>  
                        
		</h:panelGrid>
	</rich:panel>
	
	<rich:panel id="classePanel" styleClass=".form" header="Dados da classe" headerClass="header" columnClasses="label, none">
		<h:panelGrid columns="6"  >
			<h:panelGroup><div style="text-align:right; width:70px;"><h:outputLabel value="Nome:" /></div></h:panelGroup>
			<h:inputText id="nomeClasse" value="#{cc.attrs.classe.nome}"   style="width:100px;" />
		
			<h:panelGroup><div style="text-align:right; width:70px;"><h:outputLabel value="Data criação:" /></div></h:panelGroup>
	       	<rich:calendar for="dataCriacaoClasse" value="#{cc.attrs.classe.dataCriacao}" datePattern="dd/MM/yyyy" mode="ajax" boundaryDatesMode="scroll" >
	       		<f:convertDateTime type="date" dateStyle="short" locale="pt_BR" timeZone="America/Sao_Paulo" pattern="dd/MM/yyyy"/>  
	   		</rich:calendar>  
	
			<h:panelGroup><div style="text-align:right; width:70px;"><h:outputLabel value="Versão:" /></div></h:panelGroup>
			<h:inputText id="versaoClasse" value="#{cc.attrs.classe.versao}"   style="width:100px;" />
		</h:panelGrid>
	
		<h:panelGrid columns="2" >
			<h:panelGroup><div style="text-align:right; width:70px;"><h:outputLabel value="Descricao:" /></div></h:panelGroup>
			<h:inputTextarea id="descricaoClasse" value="#{cc.attrs.classe.descricao}" rows="8" cols="80" />
		</h:panelGrid>
	
	
		<h:panelGrid columns="3" >
			<a4j:commandButton action="#{cc.attrs.bean.registrar}" 	value="Registrar" 
					render="listaClasses" styleClass="register" title="Clique para incluir/alterar"/>
			<a4j:commandButton action="#{cc.attrs.bean.exclua}" value="Excluir" 
					render="listaClasses" styleClass="register" title="Clique para excluir">
				<f:setPropertyActionListener target="#{cc.attrs.bean.idClasse}" value="#{cc.attrs.classe.id}" />
			</a4j:commandButton>
			<a4j:commandButton action="#{cc.attrs.bean.novoClasse}" value="Novo" styleClass="register" title="Clique para criar um novo classe"/>
		</h:panelGrid>
	</rich:panel>
	
<rich:collapsiblePanel id="listaClasses" header="Classes" headerClass="header" title="Click to expand/collapse">
   <h:panelGroup rendered="#{empty cc.attrs.classes}">
      <em>Nenhum classe registrado.</em>
   </h:panelGroup>
   <rich:dataTable var="item" value="#{cc.attrs.classes}" rendered="#{not empty cc.attrs.classes}" style="width : 100%">
	   <rich:column>
			<a4j:commandLink action="#{cc.attrs.bean.buscaClasse}" styleClass="no-decor" render="classePanel" > Visualiza
				<f:setPropertyActionListener target="#{cc.attrs.bean.idClasse}" value="#{item.id}" />
			</a4j:commandLink>
           </rich:column>
		<rich:column>
			<f:facet name="header">Id</f:facet>  #{item.id}
           </rich:column>
		<rich:column>
			<f:facet name="header">Nome</f:facet>  #{item.nome}
           </rich:column>
		<rich:column>
			<f:facet name="header">Descrição</f:facet> #{item.descricao}
           </rich:column>
	</rich:dataTable>
</rich:collapsiblePanel>	
</composite:implementation>
</html>